<template>
  <div class="page-box">
    <dataList
      placeholder="请输入项目名称"
      :pageInfo="pager"
      :listData="tableData"
      :selectData="selectDataArr"
      searchName="projectName"
      :menuList="['add','export']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
    >
      <el-table :data="tableData" align="center" ref="multipleTable" @selection-change="$event => (selectDataArr = $event)">
        <el-table-column label="项目编号" prop="projectCode"></el-table-column>
        <el-table-column label="项目名称" prop="projectName"></el-table-column>
        <el-table-column label="项目面积(m²)" prop="projectArea"></el-table-column>
        <el-table-column label="项目类型" prop="projectType"></el-table-column>
        <el-table-column label="项目街道" prop="projectStreet"></el-table-column>
        <el-table-column label="项目位置" prop="addressInfo"></el-table-column>
        <el-table-column width="200px" label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="add_planning" @click="handlePlanning(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleGettingConstruction(scope.row)">提交</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { planProjectPage, planToUnderConstruction } from "../api/planning";
export default {
  name: "planning-index",
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData();
  },
  mounted () {
    this.add_planning = this.permissions["planproject_add"];
    this.export_planning = this.permissions["planproject_get"];
  },
  data () {
    return {
      // hxf-0827-表单绑定
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        projectName: ""
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      filterList: [
        {
          label: "项目类型",
          inputType: "dict",
          dictName: "project_types",
          name: "projectType",
          multiple: true
        },
        {
          label: "项目街道",
          inputType: "dict",
          dictName: "streets",
          name: "projectStreet",
          multiple: true
        }
      ],
      // hxf-0831-权限配置初始值
      add_planning: false,
      export_planning: false,
      //hxf-0831-传个编辑的标识
      isEdit: ""
    };
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  methods: {
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      planProjectPage(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // hxf-0827-导出
    exportTable () {
      this.publicExport('规划物业', '/api/planproject/download', this.params)
    },
    // hxf-0827-编辑
    handlePlanning (row) {
      this.$router.push({
        name: "planning_edit",
        query: { isEdit: row.projectId }
      });
    },
    // hxf-0904-推进到在建
    handleGettingConstruction (row) {
      this.$confirm(
        "该动作是将此项目提交到“在建项目” ，您确认要继续操作？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          planToUnderConstruction(row.projectId).then(res => {
            if (res.data.code === 0) {
              this.$message.success("操作成功！");
              this.getListData();
            }
          });
        })
        .catch(e => { });
    },
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case "add":
          this.$router.push({ name: "planning_add" });
          break;
        case "export":
          this.exportTable();
          break;
        default:
          this.$message(type);
          break;
      }
    }
  }
};
</script>

